import React, { FC, createContext, useState } from "react";
import Contextson from "./son";

const themes = {
  light: {
    forecolor: "black",
    background: "white",
  },
  dark: {
    forecolor: "white",
    background: "black",
  },
};
type themeType = {
  forecolor: string;
  background: string;
};
export const ChangeTheme = createContext<themeType>(themes.light);
const Mycontext: FC = () => {
  const [theme, settheme] = useState(themes.light);
  return (
    <>
      <div>context实现跨层级数据的传递</div>
      <button
        onClick={() => {
          settheme(themes.dark);
        }}
      >
        修改主题
      </button>
      <ChangeTheme.Provider value={theme}>
        <Contextson></Contextson>
      </ChangeTheme.Provider>
    </>
  );
};

export default Mycontext;
